<template>
	<uv-navbar
	  :fixed="false"
	  @leftClick="$onClickLeft"
	  bgColor="#09b4f1"
	>
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">{{title}}</text>
		</template>
	</uv-navbar>
	<view class="container">
		<view class="pb-2 flex px-5" style="background-color: #09b4f1;">
			<uv-search  placeholder="搜索商品名称" v-model="keyword" bgColor="#ffffff" :customStyle="customStyle" :show-action="false" @change="onSearch"></uv-search>
			<uv-icon name="/static/images/screen.png" :size="26" @click="openSearch"></uv-icon>
		</view>
		<view class="wrap">
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop" @scroll="scroll"  @scrolltolower="reachBottom">
				<view class="page-box">
					<block v-if="list.length > 0">
						<uv-checkbox-group>
							<view class="client" v-for="(item, index) in list" :key="index">
								<view class="top">
									<view class="left">
										<view class="store">
											<!-- <uv-checkbox 
												disabled
												activeColor = "#09b4f1"
												:checked="item.checked" 
												:name="item.id"
											>{{item.storeName}}</uv-checkbox> -->
											{{item.storeName}}
											</view>
									</view>
								</view>
								<view class="item">
									<view class="content flex-1">
										<view class="title uv-line-2 flex">
											<view class="mr-1">规格：{{item.sku}}</view>
											<uv-text color="#3c9cff" text="选择规格" @click="selectSku(item.id,index)"></uv-text>
										</view> 
										<view class="type">编号：{{item.id}}</view>
									</view>
									<view class="right flex-1">
										<view class="title">库存：{{item.stock}}</view>
										<view class="decimal">价格：{{item.price}}</view>
									</view>
								</view>
								<view class="bottom">
									<view class="client_time">添加时间: {{formatDateTime(item.createTime)}}</view>
									<view class="flex">
										<view class="btn ml-1 entity"  @click.stop="onSelect(item,index)">{{item.checked ? '取消':'选择'}}</view>
									</view>
								</view>
							</view>
						</uv-checkbox-group>
						<uv-load-more :status="listStatus" ></uv-load-more>
					</block>
					<uv-empty text="暂无数据" v-else  margin-top="50" mode="list"></uv-empty>
				</view>
			</scroll-view>
			<view class="bottom_btn flex justify-end">
				<view class="mr-1">
					<uv-button @click="selectedShow"  customStyle="padding-left:80rpx;padding-right:80rpx;border:solid" >查看已选</uv-button> 
				</view>
				<view class="mr-1">
					<uv-button color="#09b4f1" customStyle="padding-left:80rpx;padding-right:80rpx;"  @click="chosen" >选好了</uv-button>
				</view>
			</view>
		</view>
		<!-- 已选产品弹窗 -->
		<uv-popup mode="bottom" round="38" ref="selectedRef" >
			<view  class="popup-content">
				<view class="popup-title">
					<view class=""  style="width: 45px;">
					</view>
					<text class="">已选产品</text> 
					<view class="" @click="selectedClose" style="width: 45px;">
						<uv-icon name="close"  color="#909399" size="30"></uv-icon>
					</view>
				</view>
				<scroll-view scroll-y style="height: 960rpx;width: 100%;" @scrolltolower="reachBottom">
					<view class="list">
						<block v-if="selectList.length > 0">
							<view class="mb-4">
								<view class="item flex justify-content-between align-items-center" v-for="(item,index) in selectList" :key="index">
									<view class="title pr-1">{{item.storeName}}(规格:{{item.sku}})</view>
									<view class="check-icon">
										<uv-button size="mini" type="error" @click="remove(item,index)">删除</uv-button>
									</view>
								</view>
							</view>
							<uv-load-more status="nomore" ></uv-load-more>
						</block>
						<uv-empty text="暂无数据,请先选择产品" v-else  margin-top="50" mode="list"></uv-empty>
					</view>
				</scroll-view>
			</view>
		</uv-popup>
		
		<!-- 选择sku弹窗 -->
		<uv-popup  mode="bottom" round="38"  ref="selectShowRef" >
			<view class="popup-content">
				<view class="popup-title">
					<view class=""  style="width: 45px;">
					</view>
					<text class="">选择商品规格</text> 
					<view class="" @click="selectShowClose" style="width: 45px;">
						<uv-icon name="close"  color="#909399" size="30"></uv-icon>
					</view>
				</view>
				<scroll-view scroll-y style="height: 760rpx;width: 100%;" @scrolltolower="reachBottom">
					<view class="list">
						<block v-if="skuList.length > 0">
							<view class="mb-4">
								<view class="item flex" v-for="(item,index) in skuList" :key="index" @click="onItem(item,index)">
									<view class="title">{{item.sku}}</view>
									<view class="check-icon">
										<uv-icon v-if="item.checked" name="checkmark" color="#09b4f1" size="28"></uv-icon>
									</view>
								</view>
							</view>
						</block>
						<uv-empty text="暂无数据" v-else  mode="list"></uv-empty>
					</view>
				</scroll-view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
import {
  ref,
  unref,
  computed
} from 'vue'
import { onLoad,onShow,onReady } from '@dcloudio/uni-app'
import {
  getProducts,
  getProductsSku
} from '@/api/business'
import AddressSelect from '@/components/AddressSelect/index.vue'
import { formatDateTime,prePage } from '@/utils/util'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
const main = useMainStore()
const title = ref('选择商品')
const keyword = ref('')
const selected = ref(false)
const priceShow = ref(false)
const oldScrollTop = ref(0)
const scrollTop = ref(-1)
const skuList = ref([])

// search: {
// 	fontSise: '18px'
// },
const list = ref([])
const selectList = ref([])
const consentShow = ref(false)
const refund_type = ref(1)
const current = ref(0)
const pH = ref(0)
const dx = ref(0)
const scrollHeight = ref(0)
const page = ref(1)
const pageSize = ref(10)
const lastPage = ref(false)
const listStatus = ref('loadmore')
const status = ref('')
const order_id = ref('')
const thisIndex = ref(0)



onReady(()=>{
	uni.getSystemInfo({ 
		success(res) {
			pH.value = res.windowHeight 
			let scrollH = uni.createSelectorQuery().select(".sv")
			scrollH.boundingClientRect(data=>{
				let pH0 = pH.value
				scrollHeight.value = pH0 - data.top
			}).exec()
		}
	})
})

onLoad((e) => {
	//getBusinessList();
})

onShow(()=>{
	getProductList()
})


// 选中一个
const selectShowRef = ref()
const onSelect = (val,i)=> {
	if(!val.sku){
		uni.showToast({
			title: '请先选择商品规格',
			icon: 'error',
			duration: 2000
		})
		
		return
	}
	list.value.forEach((item,index) => {
		if(val.id == item.id) {
			item.checked = item.checked ? !item.checked : true
		}
	})
	// 添加已选
	if(list.value[i].checked == true) {
		// 添加已选中
		selectList.value.push(list.value[i])
	} else {
		// 删除取消选中
		selectList.value.forEach((item,i) => {
			if(item.id == val.id) {
				selectList.value.splice(i, 1)
			}
		})
	}
	
	console.log('selectList:',selectList.value)
}

const selectSku = async(val,index) => {
	thisIndex.value = index
	skuList.value = await getProductsSku({id:val})
	unref(selectShowRef).open()
}

const selectShowClose = () => {
	unref(selectShowRef).close()
}

const selectedRef = ref()
const selectedShow = () => {
	unref(selectedRef).open()
}

const selectedClose = () => {
	unref(selectedRef).close()
}

// 选择客户
const onItem = (val,i) => {
	skuList.value.forEach((item,index) => {
		if(val.id == item.id) {
			item.checked = true
		} else {
			item.checked = false
		}
	})
	
	list.value[thisIndex.value].sku = val.sku
	list.value[thisIndex.value].productAttrUnique = val.unique
	
	selectShowClose()
}

//移除已选产品
const remove = (val,index)=>  {
	list.value.forEach((i,index) => {
		if(val.id == i.id) {
			i.checked = false
		}
	})
	selectList.value.splice(index, 1)
}
// 选好了
const chosen = () => {
	// 储存
	main.SET_SELECT_PRODUCT(selectList.value)
	uni.navigateBack();
}

// 页面数据
const getProductList = async(isNextPage,pages) => {
	await getProducts({
		pageNo: page.value,
		pageSize: pageSize.value,
		storeName:keyword.value,
		isShow: 1
	}).then(res => {
		if(res) {
			res.list.forEach((item,index)=>{
				//item.create_time = this.timeFormats(item.create_time)
				item.checked = false
				// 设置默认数据
				item.nums = 1
				item.remarks = ''
				selectList.value.forEach((i,index) => {
					if(i.id == item.id) {
						item.checked = true
					}
				})
			})
			if (res.list.length < 10) {
				listStatus.value = 'nomore'
			}
			if(res.list.length == 0) {
				lastPage.value = true
			} 
			// 第二页开始
			if(isNextPage) {
				list.value = list.value.concat(res.list)
				return 
			}
			list.value = res.list
		}
	})
}
// scroll 滚动记录
const scroll = (e) => {
	oldScrollTop.value = e.detail.scrollTop
}


// 滚动到底部
const reachBottom = () => {
	if(lastPage.value || listStatus.value == 'loading') return ;
	this.listStatus = 'loading'
	setTimeout(() => {
		if(lastPage.value) return ;
		getProductList(true,++page.value)
		if(list.value.length >= 10) {
			listStatus.value = 'loadmore'
		}else {
			listStatus.value = 'loading'	
		}	
	}, 1200)
}
// 点击搜索
const onSearch = () => {
	page.value = 1
	getProductList()
}


</script>

<style lang="scss" scoped>
.container {
	background-color: #F7F7F7;
	min-height: 100vh;
}
.page-box {
	padding: 20rpx 20rpx 160rpx;
}
.client {
	width: 710rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		.right {
			color: #FF7159;
		}
	}
	.item {
		display: flex;
		align-items: center;
		margin: 20rpx 0 0;
		.content {
			font-size: 28rpx;
			.title {
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
			}
		}
		.right {
			margin-left: 10rpx;
			.title {
				line-height: 50rpx;
			}
			.decimal {
				margin: 10rpx 0;
			}
			.number {
				color: $uv-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
		align-items: center;
		.client_time {
			color: #777;
			font-size: 26rpx;
		}
		.btn {
			line-height: 60rpx;
			width: 160rpx;
			border-radius: 5px;
			font-size: 26rpx;
			text-align: center;
			color: $uv-info-dark;
		}
		.entity {
			color: #fff;
			background-color: #09b4f1; 
		}
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.bottom_btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: right;
	padding: 28rpx 10rpx 45rpx;
	background-color: #fff;
	z-index: 100;
}
.popup-content {
	.popup-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		font-size: 35rpx;
		font-weight: 600;
		text-align: center;
		height: 50px;
		padding-right: 25rpx;
	}
	.list {
		margin-bottom: 45rpx;
		.item {
			padding: 0 25rpx;
			justify-content: space-between;
			height: 55px;
			.title {
				flex: 1;
				font-size: 28rpx;
				font-weight: 600;
			}
			.check-icon {
				text-align: center;
				width: 100rpx;
			}
		}
	}
}

</style>
